<div class="layui-form" lay-filter="LAY-app-attachment-form" id="LAY-app-attachment-form">
    <div class="layui-form-item">
        <label class="layui-form-label">存储方式</label>
        <div class="layui-input-block">
            <input type="radio" name="file_type" value="image" title="图片" checked="">
            <input type="radio" name="file_type" value="file" title="附件">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文件名称</label>
        <div class="layui-input-block">
            <script type="text/html" template>
                <input type="text" name="file_name" value="{{ d.params.file_name || '' }}" lay-verify="required"
                       placeholder="请输入..." autocomplete="off" class="layui-input">
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <script type="text/plain" id="upload_ue"></script>
        <label class="layui-form-label">文件路径</label>
        <div class="layui-input-inline">
            <input type="text" name="file_path" lay-verify="required" placeholder="请上传..." autocomplete="off"
                   class="layui-input" id="file">
        </div>
        <input id="file-selector" type="file">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="确认" class="layui-btn">
        </div>
    </div>
</div>
<script src="../../../../src/lib/jquery-3.6.0.min.js"></script>
<script src="../../../../src/lib/cos-js-sdk-v5.min.js"></script>
<script>
    var Bucket = 'landymei-1305609050';
    var Region = 'ap-shanghai';

    // 初始化实例
    var cos = new COS({
        getAuthorization: function (options, callback) {
            // 异步获取临时密钥
            $.get(layui.setter.host + '/attachment/cos_sts', {
                bucket: options.Bucket,
                region: options.Region,
            }, function (data) {
                var credentials = data && data.credentials;
                if (!data || !credentials) return console.error('credentials invalid');
                callback({
                    TmpSecretId: credentials.tmpSecretId,
                    TmpSecretKey: credentials.tmpSecretKey,
                    XCosSecurityToken: credentials.sessionToken,
                    // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                    StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
                    ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
                });
            });
        }
    });
    // 接下来可以通过 cos 实例调用 COS 请求。
    // 上传对象
    $('#file-selector').off('change').on('change', function (e) {
        const fileObject = e.target.files[0];
        cos.putObject({
            Bucket: Bucket, /* 必须 */
            Region: Region, /* 存储桶所在地域，必须字段 */
            Key: fileObject.name, /* 必须 */
            StorageClass: 'STANDARD',
            Body: fileObject, // 上传文件对象
            onProgress: function(progressData) {
                console.log(JSON.stringify(progressData));
            }
        }, function(err, data) {
            console.log(err || data);
        });
    });

</script>
